<template>
	<section>
		<!--start 面包屑-->
		<div class="location">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
				<el-breadcrumb-item>系统设置</el-breadcrumb-item>
				<el-breadcrumb-item>服务器{{vue_breadcrumb_info}}</el-breadcrumb-item>
			</el-breadcrumb>
			<!--start 右侧帮助组件    可选！！-->
			<!--<help-components>
				<span slot="headtext">属性对照列表</span>
				<p slot="headDescText">属性对照列表</p>
				<div slot="helpContentWrap">
				</div>
			</help-components>-->
			<!--end 右侧帮助组件-->
		</div>
		<!--end 面包屑-->
		<!--start content-->
		<div class="wrap companyWrap" ref="companyWrap">
			<el-form :model="SystemServerData" :rules="rules" ref="dataForm" label-width="100px" class="formFontSizeMini scroll">
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item label="服务器名称" prop="serverName">
							<el-input v-model="SystemServerData.serverName" :placeholder="placeholder.serverName"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="服务器代码">
							<el-input v-model="SystemServerData.serverCode" :placeholder="placeholder.serverCode" disabled></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="类型" prop="serverType">
							<el-select class="selectWidth" v-model="SystemServerData.serverType" :placeholder="placeholder.serverType">
								<el-option v-for="(item,index) in serverTypeList" :label="item.ddlistName" :value="item.ddlistKey"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item label="用户名">
							<el-input v-model="SystemServerData.serverUser" :placeholder="placeholder.serverUser"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="密码">
							<el-input v-model="SystemServerData.serverPwd" :placeholder="placeholder.serverPwd"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="状态:" prop="dataBillstate">
							<el-radio-group v-model="SystemServerData.dataBillstate">
								<el-radio class="radio" label="0">启用</el-radio>
								<el-radio class="radio" label="1">停用</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item label="IP地址">
							<el-input v-model="SystemServerData.serverIp" :placeholder="placeholder.serverIp"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="端口号">
							<el-input v-model="SystemServerData.serverPort" :placeholder="placeholder.serverPort"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="口令">
							<el-input v-model="SystemServerData.serverToken" :placeholder="placeholder.serverToken"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item label="访问URL">
							<el-input v-model="SystemServerData.serverCallurl" :placeholder="placeholder.serverCallurl"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="是否默认:" prop="serverDefault">
							<el-radio-group v-model="SystemServerData.serverDefault">
								<el-radio class="radio" label="1">是</el-radio>
								<el-radio class="radio" label="0" checked="true">否</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<div class="btnBox" :class="{btnBox1:!$store.state.headFold}">
			<el-button type="primary" @click="save_systemServerData">保存</el-button>
			<el-button @click="cancelFn">取消</el-button>
		</div>
		<!--end content-->
	</section>
</template>

<script>
	export default {
		data() {
			return {
				vue_breadcrumb_info:"新增",   //面包屑显示
				fontColor: "#03B8CC",
				ddtypeCode: "00100000007",
				serverTypeList:[],
				SystemServerData: {
					serverName: "",
					serverCode: "",
					serverType: "",
					serverUser: "",
					serverPwd: "",
					dataBillstate: "0",
					serverIp: "",
					serverPort: "",
					serverToken: "",
					serverCallurl: "",
					serverDefault: "0",
					disabled:true
				},
				placeholder: {
					serverName: "请输入服务器名称",
					serverCode: "服务器代码",
					serverType: "请选择类型",
					serverUser: "请输入用户名",
					serverPwd: "请输入密码",
					dataBillstate: "请选择状态",
					serverIp: "请输入IP地址",
					serverPort: "请输入端口号",
					serverToken: "请输入口令",
					serverCallurl: "请输入访问URL",
					serverDefault: "请选择是否默认"
				},
				rules: {
					serverName: [{
						required: true,
						message: '服务器名称不能为空',
						trigger: 'blur'
					}],
					serverType: [{
						required: true,
						message: '类型不能为空',
						trigger: 'blur'
					}],
					dataBillstate: [{
						required: true,
						message: '状态不能为空',
						trigger: 'blur'
					}],
					serverDefault: [{
						required: true,
						message: '是否默认不能为空',
						trigger: 'blur'
					}],
				}
			}
		},
		methods: {
			//查询所有类型
			query_serverTypeListAll(ddtypeCode){
				this.axios({
					method: 'post',
					url: "/v3/system/ddlists/"+ddtypeCode+"/listAll",
					data:{

					}
				}).then((res) => {
					this.serverTypeList = res.data.list;
				}).catch((err)=>{
					this.Public.openError(this,err.response.data);
			  	});
			},
			query_systemServerData(){  //请求数据Data
				this.axios({
					method:"GET",
					url:"/v3/system/servers/"+localStorage.getItem("serverCode")
				}).then((res)=>{
					this.SystemServerData=res.data;
				}).catch((err)=>{
					this.Public.openError(this,err.response.data)
				})
			},
			save_systemServerData(){
				this.$refs.dataForm.validate((valid) => {
					if(valid) {
						if(localStorage.getItem("serverCode") == 'null'){
							this.axios({
								method:"POST",
								url:"/v3/system/servers",
								data:{
									"serverName":this.SystemServerData.serverName,
									"serverType":this.SystemServerData.serverType,
									"serverUser":this.SystemServerData.serverUser,
									"serverPwd":this.SystemServerData.serverPwd,
									"dataBillstate":this.SystemServerData.dataBillstate,
									"serverIp":this.SystemServerData.serverIp,
									"serverPort":this.SystemServerData.serverPort,
									"serverToken":this.SystemServerData.serverToken,
									"serverCallurl":this.SystemServerData.serverCallurl,
									"serverDefault":this.SystemServerData.serverDefault
								}
							}).then((res)=>{
								this.Public.openSuccess(this,"操作成功！");
								this.$router.push({path:'/system/systemServerList'})
							}).catch((err)=>{
								this.Public.openError(this,err.response.data)
							})
							localStorage.setItem("serverCode",null);
						}else{
							this.axios({
								method:"PUT",
								url:"/v3/system/servers/"+localStorage.getItem("serverCode"),
								data:{
									"serverName":this.SystemServerData.serverName,
									"serverType":this.SystemServerData.serverType,
									"serverUser":this.SystemServerData.serverUser,
									"serverPwd":this.SystemServerData.serverPwd,
									"dataBillstate":this.SystemServerData.dataBillstate,
									"serverIp":this.SystemServerData.serverIp,
									"serverPort":this.SystemServerData.serverPort,
									"serverToken":this.SystemServerData.serverToken,
									"serverCallurl":this.SystemServerData.serverCallurl,
									"serverDefault":this.SystemServerData.serverDefault
								}
							}).then((res)=>{
								this.Public.openSuccess(this,"操作成功！");
								this.$router.push({path:'/system/systemServerList'})
							}).catch((err)=>{
								this.Public.openError(this,err.response.data)
							})
							localStorage.setItem("serverCode",null);
						}
					} else {
						return false;
					}
				});
			},
			cancelFn() {
				this.$router.push({path:'/system/systemServerList'});
				localStorage.setItem("serverCode",null);
			}
		},
		created() {
			if(localStorage.getItem("serverCode") != 'null'){
				this.query_systemServerData();
				this.vue_breadcrumb_info="修改";
			}
			this.query_serverTypeListAll(this.ddtypeCode);
		},
		mounted() {
			this.$refs.companyWrap.style.height = (document.documentElement.clientHeight - 180) + 'px';
			document.querySelector(".companyWrap form").style.height = (document.documentElement.clientHeight - 180) + 'px';

		}
	}
</script>

<style>
	*{
		transition:.2s;
	}
	section {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	div.location {
		flex: 0 0 10px;
    padding: 3px 0 15px 0;
	}

	div.wrap {
		position: relative;
		flex: 1;
		width: 100%;
		padding: 15px 20px 0 20px;
		box-sizing: border-box;
		background: #fff;
	}

	.scroll {
		overflow-y: auto;
		overflow-x: hidden;
		padding-right: 10px;
	}

	.title {
		height: 50px;
		color: #03B8CC;
		font-size: 16px;
	}

	.selectWidth {
		width: 100%;
	}

	.btnBox {
		position: absolute;
		bottom: 10px;
		left:180px;
		height: 50px;
		background: #fff;
		z-index: 100;
	}
	.btnBox1 {
		left:98px;
	}
	/* start upload */
	.avatar-uploader {
	    position: relative;
		border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    overflow: hidden;
	    z-index: 9;
	}
	.avatar-uploader:hover {
		border-color: #03B8CC;
	}
	.avatar-uploader-icon {
		font-size: 20px;
		color: #8c939d;
		width: 95px;
		height: 95px;
		line-height: 95px;
		text-align: center;
	}
	.avatar-uploader .g-core-image-upload-form {
	    width: 100% !important;
	    height: 100% !important;
	    cursor: pointer;
	}
	.avatar-uploader .g-core-image-upload-form>input {
	    position: relative;
	    top: -4px;
	    cursor: pointer;
	}
	.crop-box .g-resize {
		background-color: red !important;
	}
	/* end upload */
</style>
